<template>
    <div style="position:relative;" class="container">
        <h3>基源管理</h3>
        <!-- 
        <div v-for="(item,index) in tableData" :key="index" class="classify" @click="targetclassify(item.id)">
            <img :src="item.displayImg" class="oneclassify" alt="">
            <div class="oneclassifyname">{{item.name}}</div>
        </div>
        <div class="lower">
            <div v-for="(item,index) in lowerlist" :key="index" class="classify">
                <img :src=" item.img" class="oneclassify1" alt=""  @click="targetlower(item.id)">
               
                <el-checkbox v-model="item.checked" @change="get(item)">{{item.name}}</el-checkbox>
            </div>
        </div> -->
		<div class="container">
		    <div v-for="(item,index) in tableData" :key="index" class="classify" @click="targetclassify(item.id)">
		        <img :src="item.displayImg" class="oneclassify" alt="">
		        <div class="oneclassifyname">{{item.name}}</div>
		    </div>
			<div class="lower">
				<div style="display: block;">
					 <div v-for="(item,index) in lowerlist1" :key="index" class="classify" >
						<img :src="item.img" class="oneclassify1" alt="" @click="targetlower(item.id)">
						<el-checkbox v-model="item.checked" @change="get(item)">{{item.name}}</el-checkbox>
					</div>
				</div>
			</div>
			<div>
				<div v-for="(item,zindex) in list" :key="zindex" style ="margin:20px;">
					<div class="lu hnk"></div><div class="hnk jgxx">{{item.name}}</div>
					<div>
						<div v-for="(item,index) in item.modelClassifyList" :key="index" class="classify" >
							<img :src="item.img" class="oneclassify1" alt="" @click="targetlower(item.id)">
							<el-checkbox v-model="item.checked" @change="get(item)">{{item.name}}</el-checkbox>
						</div>
					</div>
					
				</div>
			</div>
		</div> 
        <div class="newadd" >
             <router-link to="/basesource/addzw"><el-button type="primary" v-if="!addeds" class="addedshebei">增加作物</el-button></router-link>
        </div>
      
       
    </div>
</template>

<script>
    import {model_findByOne,model_findByOneId,basesource_findByAll,basesource_save,basesource_delete,model_findByParentId} from "@/request/api"
export default {

    data() {
        return {
			list:[],
            lowerlist:[
                
            ],
			lowerlist1:[],
            status:'一级分类',
            form:'',
            radio:'1',
            fen:true,
            fen1:false,
            activeName: 'first',
            name:'',
            editVisible:false,
            editVisible1:false,
            tableData: [],
            id:'',
            type:'',
            baselist:[],
            addeds:true,
        }
    },
    methods:{
     
        get(ele){
            // console.log(ele.checked)
            if(ele.checked == true){
                basesource_save({
                    modelId:ele.id
                }).then((res)=>{
                    this.init()
                }).catch((res)=>{
                    if(res.code != 200){
                        ele.checked = false
                    }
                })
            }else{
                basesource_delete(ele.id).then((res)=>{
                    this.init()
                })
            }
        },
        init(){
            basesource_findByAll("").then((res)=>{
                this.baselist = res.data
				
				// targetclassify
                for(var i =0;i<this.lowerlist.length;i++){
                    // console.log(this.lowerlist[i].checked)
                    for (let s = 0; s < this.baselist.length; s++) {
                        if(this.lowerlist[i].id == this.baselist[s].id){
                            this.lowerlist[i].checked = true
                        }
                    }
                }
            })
        },
        targetlower(id){
            this.$router.push({
                path:'/basesource/cropcheck',
                query:{
                    id:id
                }
            })
        },
        targetclassify(id){
			this.lowerlist = []
			this.lowerlist1 = []
			model_findByParentId(id).then((res)=>{
				this.list = res.data
				model_findByOneId(id).then((res)=>{
					
					// for(var i=0;i<res.data.length;i++){
					    // res.data[i].img = this.$store.state.imageUrls + res.data[i].img
					// }
					res.data.forEach(v => {
					    v.checked = false
					});
					this.lowerlist = res.data
					for(var i=0;i<this.lowerlist.length;i++){
						this.lowerlist[i].img = this.$store.state.imageUrls + this.lowerlist[i].img
						if(!this.lowerlist[i].twoId){
							this.lowerlist1.push(this.lowerlist[i])
						}
					}
						// console.log(this.lowerlist)
						for(var s=0;s<this.list.length;s++){
							this.list[s].modelClassifyList = []
							for(var r=0;r<this.lowerlist.length;r++){
								if(this.lowerlist[r].twoId == this.list[s].id){
									this.list[s].modelClassifyList.push(this.lowerlist[r])
								}
								
							}
						}
						this.init()
				})
			})
 
         
        },
        handleamend(index,row){
            this.$router.push({
                path:'/modelbase/amend',
                query:{
                    id:row.id
                }
            })
        },
        handleSearch(){
            
        },
        handleClick(){
            if(this.activeName == "first"){
                this.fen = true
                this.fen1 = false
            }
            if(this.activeName == "second"){
                this.fen = false
                this.fen1 = true
            }
        },
        added(index,row){
            this.$router.push({path:'/modelbase/added'})
        },
        handleremove(index,row){
            this.type = row.type
            this.id = row.id
            if(row.type == "一级分类"){
                this.editVisible = true
            }
            if(row.type == "二级分类"){
                this.editVisible1 = true
            }
        },
        saveEdit(){
            this.editVisible = false
            if(this.radio == 1){
                this.type = 1
            }
            if(this.radio == 2){
                this.type = 0
            }
            this.$axios.get("/model/classify/delete/" + this.id +'/'+ this.type).then((res)=>{
                this.$message.success("删除成功")
                this.getshuju()
            })
            .catch((res)=>{
                this.$message.error("删除失败")
            })
        },
        saveEdit1(){
            this.editVisible = false
            this.$axios.get("/model/classify/delete/" + this.id +'/'+ 1).then((res)=>{
                this.$message.success("删除成功")
                this.getshuju()
            })
            .catch((res)=>{
                this.$message.error("删除失败")
            })
        },
        getshuju(){
			let companyId = localStorage.getItem("companyId")
			let userType = localStorage.getItem("userType")
			let data = {
				companyId:companyId,
				userType:userType
			}
            var that = this
            model_findByOne(data).then((res)=>{
                this.tableData = res.data
				if(this.tableData.length>0){
					this.targetclassify(this.tableData[0].id)
				}
                for(var i=0;i<this.tableData.length;i++){
                    var ele = this.tableData[i]
                    this.tableData[i].displayImg = this.$store.state.imageUrls +  this.tableData[i].displayImg

                    if(ele.type == "0"){
                        ele.type = "一级分类"
                        this.tjxianshi = true
                    }
                    if(ele.type == "1"){
                        ele.type = "二级分类"
                        this.tjxianshi = false
                    }
             
                }
           
            })
            .catch((res)=>{
                console.log(res)
            })
        },

        //判定操作按钮显示
        judgmentAuthority() {
            var type = JSON.parse(localStorage.getItem('userInfo')).appMenus;
            var URL = localStorage.getItem('requestUrl');
            type.map((item) => {
                if (item.appName == '种植平台' && URL == item.appUrl) {
                    item.menus.map((item1) => {
                        if (item1.name == '基源管理' && item1.children != null) {
                            for (var i = 0; i < item1.children.length; i++) {
                                if (item1.children[i].name == '新增') this.addeds = false;
                            }
                        }
                    });
                }
                if (item.appName == '养殖追溯管理系统' && URL == item.appUrl) {
                    console.log(222)
                    item.menus.map((item1) => {
                        if (item1.name == ' 基源管理' && item1.children != null) {
                            for (var i = 0; i < item1.children.length; i++) {
                                if (item1.children[i].name == '新增') this.addeds = false;
                            }
                        }
                    });
                }
            });
        }
    },
    mounted(){
        this.getshuju();
        this.judgmentAuthority()
     
    }
   
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.reds{
    color: red;
}
.sousuo{
    position: absolute;
    top:30px;
    left:180px;
}
.newadd{
    position: absolute;
    right:20px;
    top:30px;
}
.oneclassify{
    width:70px;
    height:70px;
}
.oneclassify1{
    width:70px;
    height:70px;
    border-radius:50%;
}
.oneclassifyname{
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}
.classify{
    width:70px;
    display:inline-block;
    margin:10px;
}
 .lu{
        width: 8px;
        height: 16px;
        background: greenyellow;
    }
    .hnk{
        display:inline-block;
    }
    .jgxx{
        margin-left:10px ;
        font-weight:600;
        font-size: 15px;
    }
</style>